<template>
    <div style="padding-top: 25px">
        <!-- 添加或修改车位管理对话框 -->
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="车牌号" prop="plateCode">
                <el-input v-model="form.plateCode" placeholder="请输入车牌号" />
            </el-form-item>
            <el-form-item label="车品牌" prop="brand">
                <el-input v-model="form.brand" placeholder="请输入车品牌,如 宝马X6" />
            </el-form-item>
            <el-form-item label="车类型" prop="carType">
                <el-select v-model="form.carType" placeholder="请选择车类型">
                    <el-option v-for="dict in dict.type.parkingownercar_cartype" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="颜色" prop="carColor">
                <el-input v-model="form.carColor" placeholder="请填写车颜色,如白色" />
            </el-form-item>
            <el-form-item label="月租时间" prop="rangeDate">
                <el-date-picker v-model="form.rangeDate" @blur="changeDate" type="datetimerange" value-format="yyyy-MM-dd HH:mm" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
                <el-input v-model="form.remarks" placeholder="请输入备注" type="textarea" :rows="3" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button type="primary" @click="submitForm" size="large" style="width: 250px">提交</el-button>
        </div>
    </div>
</template>
<script>
export default {
    dicts: ['parkingownercar_cartype'],
    props: {
        fuForm: {
            type: Object,
            default: () => {
                return {};
            },
        },
        title: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            form: {
                rangeDate: [],
                startTime: '',
                endTime: '',
            },
            rules: {
                plateCode: [{ required: true, message: '车牌号不能为空', trigger: 'blur' }],
                carType: [{ required: true, message: '请选择车类型', trigger: 'change' }],
            },
        };
    },
    created() {
        this.form = {
            plateCode: '',
            brand: '',
            carType: '',
            carColor: '',
            rangeDate: [],
            startTime: '',
            endTime: '',
            remarks: '',
        };
        if (this.title == '修改信息') {
            this.form = { ...this.fuForm };
            this.form.rangeDate = [this.fuForm.startTime, this.fuForm.endTime];
        }
    },
    methods: {
        changeDate(val) {
            this.form.startTime = this.form.rangeDate[0];
            this.form.endTime = this.form.rangeDate[1];
            this.$forceUpdate()
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.$emit('submitForm', this.form);
                }
            });
        },
    },
};
</script>
